<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>

<body>
<div class="login-box" id="app" >
    <el-form label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h2 class="title" >统一认证登录平台(即请求第三方平台登录时返回的登录页面)</h2>
        <el-form-item>
            <el-input type="text"  name="userName" v-model="userName" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" name="password" v-model="password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width:100%; text-align:center;">
            <el-button type="primary" style="width:47%;" @click.native.prevent="reset">重 置</el-button>
            <el-button type="primary" style="width:47%;"  :loading="loading" @click="login">登 录</el-button>
        </el-form-item>
        <el-form>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el : '#app',
        data : {
            loading: false,
            userName: '18806504525',
            password: 'A123456'
        },
        methods : {
            login(){
                $.ajax(
                    {
                        // 第三方平台用户名密码登录认证接口，即普通的登录认证，当登录认证成功后会进行重定向处理，重定向最早之前的/oauth/authorize接口进行oauth2认证
                        url: "/oauth/authorize/login/auth",
                        type: "GET",
                        success:function(result){
                            document.getElementById("app").innerHTML = result
                        },
                        data: {
                            userName: this.userName,
                            password: this.password,
                            // 该值必须于oauth_client_details表中的web_server_redirect_uri字段值匹配，会在AuthorizationEndpoint中进行校验
                            redirect_uri: "http://172.17.56.9:8082/index.html"
                        },
                        headers: {
                            "endpoint": "WEB_BROWSER",
                            "channel": "OPEN_PLATFORM"
                        }
                    }
                );
            }
        }
    })

</script>

<style lang="scss" scoped>
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 100px auto;
        width: 320px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .title {
        margin: 0px auto 20px auto;
        text-align: center;
        color: #505458;
    }
</style>

</html>